<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>角色管理界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/myconfig/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/common/bootstrap/css/bootstrap.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/common/global.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/personal.css}" media="all">
</head>
<body>
<table id="roleList"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button data-method="addRole" class="layui-btn layui-btn-sm layui-btn-normal toolbar-btn"
                shiro:hasPermission="role_addRole">
            <i class="layui-icon">&#xe654;</i>新增角色
        </button>
        <button data-method="editRole" class="layui-btn layui-btn-sm toolbar-btn" shiro:hasPermission="role_editRole">
            <i class="layui-icon">&#xe642;</i>修改角色
        </button>
        <button data-method="setAuthorization" class="layui-btn layui-btn-sm layui-btn-warm toolbar-btn"
                shiro:hasPermission="rights_setAuthorization">
            <i class="layui-icon">&#xe672;</i>角色授权
        </button>
        <button data-method="deleteRole" class="layui-btn layui-btn-sm layui-btn-danger toolbar-btn"
                shiro:hasPermission="role_deleteRole">
            <i class="layui-icon">&#xe640;</i>删除角色
        </button>
    </div>
</script>

<script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" charset="utf-8"></script>
<!-- 获取根路径 -->
<script th:replace="fragscript :: basePath"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'layer', 'form', 'jquery'], function () {
        var table = layui.table, $ = layui.jquery;
        var roleId;//当前选中行的id
        var listRolesUrl = "/role/listRoles";
        var addRoleUrl = '/role/addRole/';//添加角色的页面
        var editRoleUrl = '/role/editRole/';
        var setAuthorizationUrl = '/rights/setAuthorization/';
        var deleteRoleUrl = "/role/deleteRole/";

        table.render({
            elem: "#roleList",
            url: basePath + listRolesUrl,//数据接口
            toolbar: "#toolbarDemo",
            cols: [[ //标题栏
                {type: 'radio', fixed: 'left'},
                {field: 'roleId', title: '#', sort: true, width: 100},
                {field: 'roleName', title: '用户角色', width: 200}
            ]]
            , page: true //开启分页
            , limits: [3, 4, 5, 6, 7, 8]
            , limit: 5
        });


        var active = {
            addRole: function () {
                layer.open({
                    type: 2,
                    title: '添加角色',
                    area: ['460px', '200px'],
                    content: basePath + addRoleUrl,
                });
            }, editRole: function () {
                if (!checked()) {
                    return;
                }
                layer.open({
                    type: 2,
                    title: '修改角色',
                    area: ['460px', '200px'],
                    content: basePath + editRoleUrl + roleId,
                });
            }, setAuthorization: function () {
                if (!checked()) {
                    return;
                }
                layer.open({
                    type: 2,
                    title: '角色授权',
                    area: ['500px', '500px'],
                    content: basePath + setAuthorizationUrl + roleId,
                });
            }, deleteRole: function () {
                if (!checked()) {
                    return;
                }
                layer.confirm('确认删除?', function (index) {
                    deleteRole();
                    layer.close(index);
                });
            },
        };

        //事件委托
        $("body").on('click', '.toolbar-btn', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        //判断是否选中数据
        function checked() {
            var checkStatus = table.checkStatus("roleList");
            if (checkStatus.data.length == 0) {
                layer.msg("还未选中数据!");
                return false;
            }
            roleId = table.checkStatus("roleList").data[0].roleId;
            return true;
        }

        function deleteRole() {
            $.ajax({
                url: basePath + deleteRoleUrl + roleId,
                type: 'delete',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 0) {
                        table.reload('roleList', {page: {curr: 1}});
                    }
                    layer.msg(result.message);
                }
            })
        }

        //刷新表格
        function reloadTable() {
            table.reload('roleList');
        }
    });
</script>
</body>
</html>